<template>
  <div class="my-containerFirst">
    <div class="t0">
      <div class="titleGiao t0">接入设备及预警统计</div>
      <div class="rSelectBox">
        <el-select
          v-model="deptId"
          size="mini"
          @change="handleDept"
          style="width: 110px"
        >
          <el-option
            v-for="item in deptList"
            :key="item.id.toString()"
            :label="item.label"
            :value="item.id.toString()"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="oneBox">
      <!-- <div class="oneLeftBox">
        <div v-for="(item, index) in typeList" :index="index" :key="index" class="item">
          <div class="iLeft">
            <div class="iName">{{ item.name }}</div>
            <div class="iTotal">
              <span class="totalText">{{ item.sum }} </span>台
            </div>
          </div>
          <div class="iRight">
            <div class="iItem">试验室设备{{ item.labNum }}台</div>
            <div class="iItem">拌合站{{ item.staNum }}台</div>
            <div class="iItem">梁场设备{{ item.beNum }}台</div>
          </div>
        </div>
      </div> -->
      <div class="oneLeftBox">
        <div
          class="item"
          v-for="(item, index) in typeList"
          :key="index"
          :style="{ 'background-image': `url(${getImageUrl(index)})` }"
        >
          <div class="olTop">
            <div class="topLName">{{ item.name }}</div>
            <div class="topLTotal">
              <span class="topLTotalText">{{ item.total }} </span>
              <span class="tai">台</span>
            </div>
          </div>
          <div class="olTwoBox">
            <div
              class="olItemn"
              v-for="(cItem, cIndex) in item.list"
              :key="cIndex"
            >
              <div>
                <span class="numText">{{ cItem.sum }}</span> 台
              </div>
              <div>
                {{ cItem.name }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- <div class="oneRightBox" id="echartsOne" style="`width: 100%;height: 100%;transform-origin: 0 0;`"></div> -->
    </div>

    <div class="twoBox">
      <div class="towLeft">
        <div class="titleTL">拌合站今日生产统计</div>
        <div
          id="echartsTwoL"
          style="`width: 100%;height: 100%;transform-origin: 0 0;`"
        ></div>
      </div>
      <div class="twoRight">
        <div class="selectBox">
          <div class="selectL">
            <div class="titleGiao">拌合站产能统计</div>
            <div class="timeSelectBox">
              <div
                @click="handleTimeType(v)"
                v-for="(v, i) in timeList"
                :class="[tiemType == v.value ? 'activeTime' : 'timeItem']"
                :key="i"
              >
                {{ v.name }}
              </div>
            </div>
          </div>
          <div class="selectR">
            <el-select
              class="selectB"
              style="width: 88px"
              size="mini"
              v-model="value"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>

        <div
          id="echartsTwoR"
          style="`width: 100%;height: 100%;transform-origin: 0 0;`"
        ></div>
      </div>
    </div>
    <div class="threeBox">
      <div class="threeLeft">
        <div class="selectBox">
          <div class="titleGiao t1">各标段试验次数及合格率分析</div>
          <!-- <div class="selectR">
            <el-select
              @change="handleEligible"
              class="selectB"
              style="width: 88px"
              size="mini"
              v-model="eligible"
            >
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div> -->
        </div>

        <div
          id="echartsThreeL"
          style="`width: 100%;height: 100%;transform-origin: 0 0;`"
        ></div>
      </div>
      <div class="threeRight">
        <div class="titleTL">各标段张拉梁片数对比</div>
        <div
          id="echartsThreeR"
          style="`width: 100%;height: 100%;transform-origin: 0 0;`"
        ></div>
      </div>
    </div>
    <div class="fourBox">
      <div class="fourLeft">
        <div class="titleGiao t2">各标段试验室设备在线情况对比</div>
        <div class="fourCenterL">
          <div
            id="echartsFourL"
            style="`width: 100%;height: 100%;transform-origin: 0 0;`"
          ></div>
          <div class="fLRight">
            <div class="fLRightItem" v-for="(item, i) in fourLData" :key="i">
              {{ item.onlineNum }} / {{ item.sum }}台
              <span class="aaa"></span> 在线总时长: {{ item.bootDuration }}分钟
            </div>
            <!-- <div class="fLRightItem">
              100台 <span class="aaa"></span> 在线总时长: 100分钟
            </div> -->
          </div>
          <div class="onlineRate">
            当前设备在线率:
            <span class="rateNum">{{ fourLLine }}</span
            >%
          </div>
        </div>
      </div>
      <div class="fourRight">
        <div class="titleGiao t2">拌合站设备在线情况</div>
        <div class="fourCenterR">
          <div
            id="echartsFourR"
            style="`width: 100%;height: 100%;transform-origin: 0 0;`"
          ></div>
          <div class="fRRight">
            <div class="fRRightItem" v-for="(item, i) in fourRData" :key="i">
              {{ item.onlineNum }} / {{ item.sum }}台
              <span class="aaa"></span> 在线总时长: {{ item.bootDuration }}分钟
            </div>
          </div>
          <div class="onlineRate">
            当前设备在线率:
            <span class="rateNum">{{ fourRLine }}</span
            >%
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import {
  countOne,
  newCountOne,
  productToday,
  productYear,
  tensionBeamNoCount,
  labDeviceOnlineCount,
  mixDeviceOnlineCount,
  labEligibleCount,
} from "@/api/firstPage/index";
import { businessDeptTreeTop } from "@/api/common/common";
import decimal from "@/utils/big-decimal";

export default {
  name: "Index",
  components: {},
  props: {},
  data() {
    return {
      typeList: [
        // {
        //   name: '灌浆设备', total: 11,
        //   List: [
        //     { name: '济微一标', num: 5 },
        //     { name: '济微二标', num: 6 },
        //     { name: '济微三标', num: 0 },
        //     { name: '济微四标', num: 12 },
        //   ]
        // },
      ],
      // typeList: [
      //   {
      //     value: 1,
      //     label: "合格",
      //   },
      //   {
      //     value: 0,
      //     label: "不合格",
      //   },
      // ],
      // eligible: 1,
      options: [
        //  {
        //   value: 1,
        //   label: "水稳",
        // },
        //  {
        //   value: 2,
        //   label: "沥青",
        // },
        {
          value: 3,
          label: "混凝土",
        },
      ],
      value: 3,
      tiemType: "month",
      timeList: [
        { name: "周", value: "week" },
        { name: "月", value: "month" },
        { name: "年", value: "year" },
        { name: "累计", value: "total" },
      ],
      radio: "月",
      oneList: [],
      sumAll: 0,
      echartsOne: null,
      echartsTwoL: null,
      twoLData: [],
      twoRData: [],
      twoRDataSeries: [],
      threeLData: [],
      threeBarList: [],
      threeLineList: [],
      threeRData: [],
      fourLData: [],
      fourLSum: 0,
      fourLLine: 0,
      fourRData: [],
      fourRSum: 0,
      fourRLine: 0,
      echartsTwoR: null,
      echartsThreeL: null,
      echartsThreeR: null,
      echartsFourL: null,
      echartsFourR: null,
      deptId: "",
      deptList: [],
    };
  },
  created() {
    this.$nextTick(() => {
      // 模拟单点登录
      const loginMode = this.$route.query.m;
      if (
        loginMode ===
        "$2a$10$BdtyIe5C0yABddFUTntWdOPTSEDGJiMuGohOVmVu.qMLhqlbThdye"
      ) {
        // 设置项目不展示头部并修改主题颜色
        this.$store.state.settings.sideTheme = "theme-light";
        this.$store.state.settings.navbarView = false;
        // this.$store.state.settings.sidebarLogo = false;// 左侧tab是否收起
        this.$store.dispatch("app/toggleSideBar");
        this.$store
          .dispatch("UnitLogin", this.$route.query)
          .then(() => {
            // this.$nextTick(() => {
            this.$store
              .dispatch("GetInfo")
              .then(() => {
                this.$store.dispatch("GenerateRoutes").then((accessRoutes) => {
                  // 根据roles权限生成可访问的路由表
                  // setTimeout(() => {
                  this.$router.addRoutes(accessRoutes); // 动态添加可访问路由表
                  // })
                  setTimeout(() => {
                    this.initData();
                  });
                });
              })
              .catch((err) => {
                this.$store.dispatch("LogOut");
              });
            // });
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.initData();
      }
    });
  },
  watch: {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    handleDept() {
      this.getAllData();
    },
    initData() {
      businessDeptTreeTop().then((res) => {
        if (res.code == 200) {
          this.deptId = res.data[0].id.toString() || "";
          this.deptList = res.data;
          console.log(this.deptId);
          this.getAllData();
        }
      });
    },
    getAllData() {
      this.getOneTopData();
      // this.getTopData();
      this.getTwoDataL(); //ok
      this.getTwoDataR(); //no
      this.getThreeDataL();
      this.getThreeDataR();
      this.getFourDataL();
      this.getFourDataR();
    },
    getOneTopData() {
      newCountOne({
        deptId: this.deptId,
      }).then((res) => {
        this.typeList = res.data;
      });
    },
    getTopData() {
      countOne({
        deptId: this.deptId,
      }).then((res) => {
        res.data.forEach((v) => {
          v.value = v.sum;
        });
        this.oneList = res.data;
        this.sumAll = res.data.reduce(function (prev, cur) {
          return Number(cur.sum) + prev;
        }, 0);
        // this.$nextTick(() => {
        //   this.createEchartsOne();
        // });
      });
    },
    getTwoDataL() {
      productToday({
        deptId: this.deptId,
      }).then((res) => {
        this.twoLData = [];
        for (let i = 0; i < res.data.length; i++) {
          this.twoLData[i] = [];
          this.twoLData[i][0] = res.data[i].name;
          this.twoLData[i][1] = res.data[i].swNum;
          this.twoLData[i][2] = res.data[i].lqNum;
          this.twoLData[i][3] = res.data[i].hntNum;
        }
        this.twoLData.unshift(["product", "水稳", "沥青", "混凝土"]);
        this.$nextTick(() => {
          this.createEchartsTwoL();
        });
      });
    },
    getTwoDataR() {
      productYear({
        deptId: this.deptId,
        type: this.value,
        dateType: this.tiemType,
      }).then((res) => {
        this.twoRDataSeries = [];
        this.twoRData = res.data;
        res.data[0].forEach((v) => {
          this.twoRDataSeries.push({ type: "bar" });
        });

        if (res.data.length) {
          this.twoRData[0].unshift("product");
        }
        this.$nextTick(() => {
          this.createEchartsTwoR();
        });
      });
    },
    getThreeDataL() {
      labEligibleCount({
        deptId: this.deptId,
      }).then((res) => {
        // [
        //   {
        //     name: "济微一标",
        //     type: "bar",
        //     tooltip: {
        //       valueFormatter: function (value) {
        //         return "试验" + value + "次";
        //       },
        //     },
        //     data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
        //   },
        //   {
        //     name: "济微一标",
        //     type: "line",
        //     yAxisIndex: 1,
        //     tooltip: {
        //       valueFormatter: function (value) {
        //         return "合格率" + value + " %";
        //       },
        //     },
        //     data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
        //   },
        // ],
        res.data.forEach((v) => {
          // 1柱状图2折线条
          v.mxr1 = Number(v.mxr1);
          v.mxr2 = Number(v.mxr2);
          v.rhd1 = Number(v.rhd1);
          v.rhd2 = Number(v.rhd2);
          v.rsl1 = Number(v.rsl1);
          v.rsl2 = Number(v.rsl2);
          v.wnj1 = Number(v.wnj1);
          v.wnj2 = Number(v.wnj2);
          v.yd1 = Number(v.yd1);
          v.yd2 = Number(v.yd2);
          v.ylj1 = Number(v.ylj1);
          v.ylj2 = Number(v.ylj2);
          v.zrd1 = Number(v.zrd1);
          v.zrd2 = Number(v.zrd2);
        });
        this.threeLData = res.data || [];
        this.threeLData.forEach((v) => {
          this.threeBarList.push([
            v.zrd1,
            v.rhd1,
            v.yd1,
            v.mxr1,
            v.rsl1,
            v.ylj1,
            v.wnj1,
          ]);
          this.threeLineList.push([
            v.zrd2,
            v.rhd2,
            v.yd2,
            v.mxr2,
            v.rsl2,
            v.ylj2,
            v.wnj2,
          ]);
        });
        this.$nextTick(() => {
          this.createEchartsThreeL();
        });
      });
    },
    getThreeDataR() {
      tensionBeamNoCount({
        deptId: this.deptId,
      }).then((res) => {
        this.threeRData = res.data;
        this.$nextTick(() => {
          this.createEchartsThreeR();
        });
      });
    },
    getFourDataL() {
      labDeviceOnlineCount({
        deptId: this.deptId,
      }).then((res) => {
        res.data.forEach((v) => {
          v.value = v.sum;
        });
        console.log(res);
        this.fourLData = res.data;
        this.fourLSum = res.data.reduce(function (prev, cur) {
          return Number(cur.sum) + prev;
        }, 0);
        console.log(this.fourLSum);

        // 在线/总
        let onLine = res.data.reduce(function (prev, cur) {
          return Number(cur.onlineNum) + prev;
        }, 0);

        let allSum = res.data.reduce(function (prev, cur) {
          return Number(cur.sum) + prev;
        }, 0);
        // this.fourLLine = Number(onLine) ? 100 * ((Number(onLine) / Number(allSum)).toFixed(2)) : 0;
        if (Number(onLine)) {
          const a = decimal.divide(onLine, allSum, 2);
          const b = decimal.multiply(100, a, 2);
          this.fourLLine = b;
        } else {
          this.fourLLine = 0;
        }

        this.$nextTick(() => {
          this.createEchartsFourL();
        });
      });
    },
    getFourDataR() {
      mixDeviceOnlineCount({
        deptId: this.deptId,
      }).then((res) => {
        res.data.forEach((v) => {
          v.value = v.sum;
        });

        this.fourRData = res.data;
        this.fourRSum = res.data.reduce(function (prev, cur) {
          return Number(cur.sum) + prev;
        }, 0);
        // 在线/总
        let onLine = res.data.reduce(function (prev, cur) {
          return Number(cur.onlineNum) + prev;
        }, 0);

        let allSum = res.data.reduce(function (prev, cur) {
          return Number(cur.sum) + prev;
        }, 0);
        this.fourRLine = Number(onLine)
          ? 100 * (Number(onLine) / Number(allSum)).toFixed(2)
          : 0;
        if (Number(onLine)) {
          const a = decimal.divide(onLine, allSum, 2);
          const b = decimal.multiply(100, a, 2);
          this.fourRLine = b;
        } else {
          this.fourRLine = 0;
        }

        this.$nextTick(() => {
          this.createEchartsFourR();
        });
      });
    },

    createEchartsOne() {
      if (null == this.echartsOne) {
        this.echartsOne = echarts.init(document.getElementById("echartsOne"));
      } else {
        this.echartsOne.clear();
      }
      this.echartsOne.showLoading();
      this.echartsOne.setOption({
        title: {
          text: this.sumAll,
          right: "67%",
          // right: "195px",
          top: "42%",
          // top: "64px",
          textStyle: {
            fontSize: 20,
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          top: "15%",
          left: "65%",
        },
        series: [
          {
            name: "",
            type: "pie",
            right: "45%",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 16,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.oneList || [],
          },
        ],
      });
      this.echartsOne.hideLoading();
    },
    createEchartsTwoL() {
      if (null == this.echartsTwoL) {
        this.echartsTwoL = echarts.init(document.getElementById("echartsTwoL"));
      } else {
        this.echartsTwoL.clear();
      }
      this.echartsTwoL.showLoading();
      this.echartsTwoL.setOption({
        grid: {
          //调整图表位置
          show: false, //是否显示直角坐标系网格
          top: "15%", // 距离图例顶部的位置，可写百分比，可以写数字
          right: "8%",
          bottom: "15%",
          left: "8%",
        },
        legend: {},
        tooltip: {},
        dataset: {
          source: this.twoLData,
        },
        xAxis: { type: "category" },
        yAxis: {
          name: "单位: 方",
          type: "value",
        },
        series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
      });
      this.echartsTwoL.hideLoading();
    },
    createEchartsTwoR() {
      if (null == this.echartsTwoR) {
        this.echartsTwoR = echarts.init(document.getElementById("echartsTwoR"));
      } else {
        this.echartsTwoR.clear();
      }
      this.echartsTwoR.showLoading();
      this.echartsTwoR.setOption({
        grid: {
          //调整图表位置
          show: false, //是否显示直角坐标系网格
          top: "15%", // 距离图例顶部的位置，可写百分比，可以写数字
          right: "6%",
          bottom: "20%",
          left: "10%",
        },
        legend: {},
        tooltip: {},

        dataset: {
          source: this.twoRData,
        },
        xAxis: { type: "category" },
        yAxis: {
          name: "单位: 方",
          type: "value",
        },
        series: this.twoRDataSeries || [],
        //  [
        //   { type: "bar" },
        //   { type: "bar" },
        //   { type: "bar" },
        //   { type: "bar" },
        // ],
        dataZoom: [
          {
            // 设置滚动条的隐藏与显示
            show: true,
            // 设置滚动条类型
            type: "slider",
            // 设置背景颜色
            backgroundColor: "rgb(19, 63, 100)",
            // 设置选中范围的填充颜色
            fillerColor: "rgb(16, 171, 198)",
            // 设置边框颜色
            borderColor: "rgb(19, 63, 100)",
            // 是否显示detail，即拖拽时候显示详细数值信息
            showDetail: false,
            // 数据窗口范围的起始数值
            startValue: 0,
            // 数据窗口范围的结束数值（一页显示多少条数据）
            endValue: 5,
            // empty：当前数据窗口外的数据，被设置为空。
            // 即不会影响其他轴的数据范围
            filterMode: "empty",
            // 设置滚动条宽度，相对于盒子宽度
            width: "80%",
            // 设置滚动条高度
            height: 5,
            // 设置滚动条显示位置
            left: "center",
            // 是否锁定选择区域（或叫做数据窗口）的大小
            zoomLoxk: true,
            // 控制手柄的尺寸
            handleSize: 0,
            // dataZoom-slider组件离容器下侧的距离
            bottom: 10,
          },
          {
            // 没有下面这块的话，只能拖动滚动条，
            // 鼠标滚轮在区域内不能控制外部滚动条
            type: "inside",
            // 滚轮是否触发缩放
            zoomOnMouseWheel: false,
            // 鼠标滚轮触发滚动
            moveOnMouseMove: true,
            moveOnMouseWheel: true,
          },
        ],
      });
      this.echartsTwoR.hideLoading();
    },

    createEchartsThreeL() {
      if (null == this.echartsThreeL) {
        this.echartsThreeL = echarts.init(
          document.getElementById("echartsThreeL")
        );
      } else {
        this.echartsThreeL.clear();
      }
      this.echartsThreeL.showLoading();
      this.echartsThreeL.setOption({
        grid: {
          //调整图表位置
          show: false, //是否显示直角坐标系网格
          top: "15%", // 距离图例顶部的位置，可写百分比，可以写数字
          right: "8%",
          bottom: "15%",
          left: "8%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ["line", "bar"] },
        //     restore: { show: true },
        //     saveAsImage: { show: true },
        //   },
        // },
        legend: {
          data: this.threeLData.map((v) => {
            return v.name;
          }),
        },
        xAxis: [
          {
            type: "category",
            data: [
              "针入度",
              "软化点",
              "延度",
              "马歇尔",
              "燃烧炉",
              "压力机",
              "万能机",
            ],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "次",
            min: 0,

            axisLabel: {
              formatter: "{value}",
            },
          },
          // {
          //   type: "value",
          //   name: "%",
          //   min: 0,
          //   axisLabel: {
          //     formatter: "{value}",
          //   },
          // },
        ],
        series: this.threeLData.map((v, i) => {
          return {
            name: v.name,
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return "试验" + value + "次";
              },
            },
            data: this.threeBarList[i],
          };
        }),

        // [
        // {
        //   name: "济微一标",
        //   type: "bar",
        //   tooltip: {
        //     valueFormatter: function (value) {
        //       return "试验" + value + "次";
        //     },
        //   },
        //   data: this.threeBarList[0],
        // },
        // {
        //   name: "济微二标",
        //   type: "bar",
        //   tooltip: {
        //     valueFormatter: function (value) {
        //       return "试验" + value + "次";
        //     },
        //   },
        //   data: this.threeBarList[1],
        // },
        // {
        //   name: "济微三标",
        //   type: "bar",
        //   tooltip: {
        //     valueFormatter: function (value) {
        //       return "试验" + value + "次";
        //     },
        //   },
        //   data: this.threeBarList[2],
        // },
        // {
        //   name: "济微四标",
        //   type: "bar",
        //   tooltip: {
        //     valueFormatter: function (value) {
        //       return "试验" + value + "次";
        //     },
        //   },
        //   data: this.threeBarList[3],
        // },
        // {
        //   name: "济微一标",
        //   type: "line",
        //   yAxisIndex: 1,
        //   tooltip: {
        //     valueFormatter: function (value) {
        //       return "合格率" + value + " %";
        //     },
        //   },
        //   data: this.threeLineList[0]
        // },
        // {
        //   name: "济微二标",
        //   type: "line",
        //   yAxisIndex: 1,
        //   tooltip: {
        //     valueFormatter: function (value) {
        //       return "合格率" + value + " %";
        //     },
        //   },
        //   data: this.threeLineList[1]
        // },
        // {
        //   name: "济微三标",
        //   type: "line",
        //   yAxisIndex: 1,
        //   tooltip: {
        //     valueFormatter: function (value) {
        //       return "合格率" + value + " %";
        //     },
        //   },
        //   data: this.threeLineList[2]
        // },
        // {
        //   name: "济微四标",
        //   type: "line",
        //   yAxisIndex: 1,
        //   tooltip: {
        //     valueFormatter: function (value) {
        //       return "合格率" + value + " %";
        //     },
        //   },
        //   data: this.threeLineList[3]
        // },
        // ],
      });
      this.echartsThreeL.hideLoading();
    },
    createEchartsThreeR() {
      if (null == this.echartsThreeR) {
        this.echartsThreeR = echarts.init(
          document.getElementById("echartsThreeR")
        );
      } else {
        this.echartsThreeR.clear();
      }
      this.echartsThreeR.showLoading();
      this.echartsThreeR.setOption({
        grid: {
          //调整图表位置
          show: false, //是否显示直角坐标系网格
          top: "15%", // 距离图例顶部的位置，可写百分比，可以写数字
          right: "8%",
          bottom: "15%",
          left: "8%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        xAxis: {
          type: "category",
          data: this.threeRData.map((v) => {
            return v.name;
          }),
          //  ["一标", "二标", "三标", "四标"],
        },
        yAxis: {
          name: "单位: 次",
          type: "value",
        },
        series: [
          {
            data: this.threeRData.map((v) => {
              return v.num;
            }),
            // [120, 200, 150, 80],
            type: "bar",
          },
        ],
      });
      this.echartsThreeR.hideLoading();
    },
    createEchartsFourL() {
      if (null == this.echartsFourL) {
        this.echartsFourL = echarts.init(
          document.getElementById("echartsFourL")
        );
      } else {
        this.echartsFourL.clear();
      }
      this.echartsFourL.showLoading();
      this.echartsFourL.setOption({
        title: {
          text: this.fourLSum,
          right: "68%",
          // right: "191px",
          top: "43%",
          // top: "91px",
          textStyle: {
            fontSize: 26,
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          top: "40%",
          left: "66%",
        },
        series: [
          {
            name: "",
            type: "pie",
            right: "45%",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 16,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.fourLData || [],
          },
        ],
      });
      this.echartsFourL.hideLoading();
    },
    createEchartsFourR() {
      if (null == this.echartsFourR) {
        this.echartsFourR = echarts.init(
          document.getElementById("echartsFourR")
        );
      } else {
        this.echartsFourR.clear();
      }
      this.echartsFourR.showLoading();
      this.echartsFourR.setOption({
        title: {
          text: this.fourRSum,
          right: "68%",
          top: "43%",
          // right: "191px",
          // top: "91px",
          textStyle: {
            fontSize: 26,
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          top: "40%",
          left: "66%",
        },
        series: [
          {
            name: "",
            type: "pie",
            right: "45%",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 16,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.fourRData || [],
          },
        ],
      });
      this.echartsFourR.hideLoading();
    },
    handleEligible(val) {
      this.getThreeDataL();
    },
    handleType() {
      this.getTwoDataR();
    },
    handleTimeType(v) {
      this.tiemType = v.value;
      this.getTwoDataR();
    },
    getImageUrl(index) {
      const itemBgList = ["one", "two", "three", "four"];
      return require(`@/assets/images/${itemBgList[index]}.png`);
    },
  },
};
</script>

<style lang="scss" scoped>
.my-containerFirst {
  padding: 6px 12px;
  background-image: url("../../assets/images/pageBg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  .titleGiao {
    background: #fff;
    padding: 6px 10px;
    font-size: 14px;
    font-weight: 600;
    color: #151d5e;
  }

  .titleTL {
    font-size: 14px;
    font-weight: 600;
    color: #151d5e;
    padding: 12px 10px;
    background: #fff;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }

  .oneBox {
    display: flex;
    width: 100%;
    height: 160px;

    .oneLeftBox {
      display: flex;
      justify-content: space-between;
      // width: 72%;
      width: 100%;
      height: 100%;

      .item {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: bottom;
        border-radius: 10px;
        // display: flex;
        // justify-content: space-around;
        width: 24%;
        // margin-right: 1%;
        height: 100%;
        // padding: 16px 0;
        padding: 14px;
        color: #fff;

        .iLeft {
          .iName {
            font-size: 18px;
            font-weight: 800;
            margin-bottom: 50px;
          }

          .iTotal {
            text-align: center;

            .totalText {
              font-weight: 600;
              font-size: 20px;
              color: #0099fd;
            }
          }
        }

        .iRight {
          margin-top: 20px;

          .iItem {
            color: #000;
            font-size: 13px;
            font-weight: 500;
            margin-top: 5px;
          }
        }

        .olTop {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          margin-bottom: 18px;

          .topLName {
            font-size: 18px;
          }

          .topLTotal {
            margin-right: 20px;

            .topLTotalText {
              font-size: 32px;
              font-style: italic;
              font-weight: 600;
            }

            .tai {
              font-size: 14px;
            }
          }
        }

        .olTwoBox {
          width: 70%;
          display: flex;
          flex-wrap: wrap;

          .olItemn {
            width: 50%;
            font-size: 10px;

            .numText {
              font-size: 16px;
              font-style: italic;
              font-weight: 600;
            }
          }
        }
      }
    }

    .oneRightBox {
      background: #fff;
      width: 28%;
      height: 100%;
    }
  }

  .twoBox {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    height: 185px;

    .towLeft {
      width: 49%;
      height: 100%;

      #echartsTwoL {
        background: #fff;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
      }
    }

    .twoRight {
      width: 49%;
      height: 100%;

      .selectBox {
        padding: 6px 10px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;

        .selectL {
          display: flex;
          align-items: center;

          .timeSelectBox {
            display: flex;
            align-items: center;

            .timeItem {
              cursor: pointer;
              width: 50px;
              height: 28px;
              line-height: 28px;
              text-align: center;
              background: #fff;
              color: #3c7bff;
              border: 1px solid #3c7bff;
              border-radius: 5px;
              margin-left: 8px;
            }

            .activeTime {
              cursor: pointer;
              width: 50px;
              height: 28px;
              line-height: 28px;
              text-align: center;
              border: 1px solid #3c7bff;
              background: #0099ff;
              color: #fff;
              border-radius: 5px;
              margin-left: 8px;
            }
          }
        }
      }

      #echartsTwoR {
        background: #fff;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
      }
    }
  }

  .threeBox {
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
    height: 185px;

    .threeLeft {
      width: 49%;
      height: 100%;

      .selectBox {
        padding: 6px 0;
        // padding-bottom: 8px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;

        .selectL {
          display: flex;
          align-items: center;

          .timeSelectBox {
            display: flex;
            align-items: center;

            .timeItem {
              cursor: pointer;
              width: 40px;
              height: 25px;
              line-height: 25px;
              text-align: center;
              background: #797979;
              color: #fff;
              border-radius: 5px;
              margin-left: 8px;
            }

            .activeTime {
              cursor: pointer;
              width: 40px;
              height: 25px;
              line-height: 25px;
              text-align: center;
              background: #0099ff;
              color: #000;
              border-radius: 5px;
              margin-left: 8px;
            }
          }
        }
      }

      #echartsThreeL {
        background: #fff;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
      }
    }

    .threeRight {
      width: 49%;
      height: 100%;

      #echartsThreeR {
        background: #fff;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
      }
    }
  }

  .fourBox {
    margin-top: 60px;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    height: 215px;

    .fourLeft {
      width: 49%;
      height: 100%;

      .fourCenterL {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;

        #echartsFourL {
          width: 55%;
          background: #fff;
          border-bottom-left-radius: 6px;
        }

        .fLRight {
          font-size: 14px;
          padding-top: 88px;
          color: #3e3e3e;
          width: 45%;
          background: #fff;
          border-bottom-right-radius: 6px;

          .fLRightItem {
            margin-bottom: 6px;

            .aaa {
              display: inline-block;
              margin-right: 15px;
            }
          }
        }

        .onlineRate {
          color: #000;
          position: absolute;
          top: 34px;
          left: 50%;

          .rateNum {
            font-size: 20px;
          }
        }
      }
    }

    .fourRight {
      width: 49%;
      height: 100%;

      .fourCenterR {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;

        #echartsFourR {
          width: 55%;
          background: #fff;
          border-bottom-left-radius: 6px;
        }

        .fRRight {
          font-size: 14px;
          padding-top: 88px;
          color: #3e3e3e;
          width: 45%;
          background: #fff;
          border-bottom-left-radius: 6px;

          .fRRightItem {
            margin-bottom: 6px;

            .aaa {
              display: inline-block;
              margin-right: 15px;
            }
          }
        }

        .onlineRate {
          color: #000;
          position: absolute;
          top: 34px;
          left: 50%;

          .rateNum {
            font-size: 20px;
          }
        }
      }
    }
  }

  .t0 {
    background: none;
    padding-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .t1 {
    padding: 5px 10px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }

  .t2 {
    padding-top: 12px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }
}
</style>
<style lang="scss">
.selectR {
  .selectB {
    .el-input__inner {
      background: #ffffff !important;
      border: 1px solid #9eb6d6 !important;
    }
  }
}

.rSelectBox {
  .el-input {
    border-radius: 5px;
    background: #3c7bff !important;
  }

  .el-input__inner {
    border-color: #3c7bff;
    color: #fff;
  }

  .el-select__caret {
    color: #fff !important;
  }
}
</style>
